import React from 'react'
import ReactECharts from 'echarts-for-react'
import type { EChartsOption } from 'echarts'

export interface RadarChartData {
  name: string
  value: number[]
  color?: string
}

export interface RadarChartProps {
  data: RadarChartData[]
  indicators: Array<{ name: string; max: number }>
  height?: number | string
  title?: string
}

/**
 * 雷达图组件
 * 用于多维度数据对比分析
 */
const RadarChart: React.FC<RadarChartProps> = ({
  data,
  indicators,
  height = 400,
  title
}) => {
  const option: EChartsOption = {
    title: title ? {
      text: title,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal'
      }
    } : undefined,
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const { name, value } = params
        let result = `<div style="font-weight: bold; margin-bottom: 4px;">${name}</div>`
        value.forEach((val: number, idx: number) => {
          result += `<div>${indicators[idx].name}: ${val.toLocaleString()}</div>`
        })
        return result
      }
    },
    legend: {
      bottom: 10,
      data: data.map(item => item.name)
    },
    radar: {
      indicator: indicators,
      shape: 'polygon',
      splitNumber: 5,
      axisName: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: ['#f0f0f0', '#e0e0e0', '#d0d0d0', '#c0c0c0', '#b0b0b0']
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(250,250,250,0.3)', 'rgba(230,230,230,0.3)']
        }
      }
    },
    series: [{
      type: 'radar',
      data: data.map(item => ({
        name: item.name,
        value: item.value,
        areaStyle: {
          opacity: 0.2
        },
        lineStyle: {
          width: 2,
          color: item.color
        },
        itemStyle: {
          color: item.color
        }
      }))
    }]
  }

  return (
    <ReactECharts
      option={option}
      style={{ height, width: '100%' }}
      opts={{ renderer: 'canvas' }}
    />
  )
}

export default RadarChart
